// components/week-calendar/week-calendar.ts
import dayjs, { Dayjs } from "dayjs"
import {get} from "@utils/http"
import { CalendarNodeType } from "miniprogram/@types/Calendar"
import { ActivityType } from "miniprogram/@types/Activity"

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    location:{},
    mode:""
  },
  /**
   * 组件的属性监听
   */
  observers:{
    "location.**":function(){
      this.init()
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    month:dayjs().format("M月"),
    time:null,
    activityDay:null,
    weekCalendar:[],
    week:["日","一","二","三","四","五","六"],
    activityTime:"",
    activityList:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init:async function(){
      this.setData({
        time:this.data.time||dayjs()
      })
      await this.getWeekActivity()
      this.initCalendar()
      this.initActivityDay(this.data.activityDay||dayjs())
    },
    getWeekActivity:async function(){
      const {time}=this.data
      const res=await get("/activity",{
        campus:this.properties.location.selectRegion,
        school:this.properties.location.selectSchool,
        start:time.startOf("week").format("YYYY-MM-DD HH:mm:ss"),
        end:time.endOf("week").format("YYYY-MM-DD HH:mm:ss"),
        flag:0,
        verified:1
      })
      this.setData({
        WeekactivityList:res
      })
    },
    initCalendar:function(){
      const time=this.data.time
      const start=time.startOf("week")
      let week:CalendarNodeType[]=[]
      for(let i=0;i<=7;i++){
        const day=start.add(i,"day")
        week.push({
          day:day.get("date"),
          today:day.isSame(dayjs(),"day"),
          active:false,
          month:day.get("month"),
          year:day.get("year"),
          primary:false,
          yellow:false,
          blue:false,
          activityList:[]
        })
      }
      this.data.WeekactivityList.forEach((activity:ActivityType) => {
        const color=activity.type==="娱乐"?"blue":activity.type==="交友"?"yellow":"primary"
        const index=dayjs(activity.start).day()
        week[index][color]=true
        week[index].activityList.push(activity)
      });
      this.setData({
        weekCalendar:week,
      })
    },
    initActivityDay(date:Dayjs){
      const {weekCalendar}=this.data
      const {activityList}=weekCalendar[date.day()]
      this.setData({
        activityDay:date,
        activityList,
        activityTime:date.format("M月D日"),
        weekCalendar:weekCalendar.map((item:CalendarNodeType)=>{
          item.active=date.year()===item.year&&date.month()===item.month&&date.date()===item.day
          return item
        })
      })
    },
    changeWeek:async function(e){
      const i=e.currentTarget.dataset.i
      const time=this.data.time.add(i,"week")
      this.setData({
        time,
        month:time.format("M月")
      })
      await this.getWeekActivity()
      this.initCalendar()
    },
    changeDay:function(e){
      const {day,month,year}=e.currentTarget.dataset.item
      this.initActivityDay(dayjs().year(year).month(month).date(day))
    },
    async changeLocation(){
      await this.getWeekActivity()
      this.initCalendar()
      this.initActivityDay(this.data.activityDay)
    },
    getDetail:async function(activeDay:Dayjs){
      this.setData({
        time:activeDay,
        month:activeDay.format("M月")
      })
      await this.getWeekActivity()
      this.initCalendar()
      this.initActivityDay(activeDay)
    },
  },
})